<template>
    <view id="container"></view>
</template>

<script lang="ts" setup>
import { onLoad,onHide } from "@dcloudio/uni-app"
import AMapLoader from '@amap/amap-jsapi-loader'

let map = null;

window._AMapSecurityConfig = {
    securityJsCode: "03c7982de12ff0d9363147542825c7cd",
};

onLoad(() => {
    initMap()
})

const initMap = () => {
    AMapLoader.load({
        key: "52509298a2dc3a3579cb4c0e06aa03f6", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    }).then((AMap) => {
        // 观音桥
        const start = {lng: '106.526777', lat: '29.58665'}
        map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 12, // 初始化地图级别
            center: [start.lng, start.lat], // 初始化地图中心点位置
        });
        
        AMap.plugin('AMap.Driving', () => {
            const driving = new AMap.Driving({
                // https://lbs.amap.com/api/javascript-api-v2/documentation#driving
                // 驾车路线规划策略
                // policy: 0,
                // AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选
                map,

                // 设置隐藏路径规划的起始点图标 设置为true：隐藏图标；设置false：显示图标\n默认值为：false
                // hideMarkers: true
                // 设置是否显示实时路况信息，默认设置为true。 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
                // showTraffic: true
            })

            // 黄泥磅
            const end = {lng: '106.53975', lat: '29.58812'}

            driving.search(
                [start.lng, start.lat],
                [end.lng, end.lat],
                (status, result) => {
                    console.log(status);
                    console.log(result);
                    const currentLocation = {lng: '106.528833', lat: '29.584153'}
                    const currentMarker = markerImage(currentLocation, '/static/images/truck.png', 30, 30)

                    // 3秒后定位到中间进行放大
                    setTimeout(() => {
                        map.setFitView([currentMarker])
                        map.setZoom(18)
                    }, 3000);
                }
            )
        })
    }).catch((e) => {
        onsole.log(e);
    });
}

// 自定义设置标记点
const marker = (start) => {
    //创建一个 Marker 实例：
    const marker = new AMap.Marker({
        position: new AMap.LngLat(start.lng, start.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "观音桥",
    });
    //将创建的点标记添加到已有的地图实例：
    map.add(marker);
}

// 自定义设置标记点
const markerImage = (start, image, width = 25, height = 25) => {
    // 创建图片
    const icon = new AMap.Icon({
        size: new AMap.Size(width, height),
        image: image,
        imageSize: new AMap.Size(width, height)
    })
    
    //创建一个 Marker 实例：
    const marker = new AMap.Marker({
        position: [start.lng, start.lat], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: icon,
        offset: new AMap.Pixel(-width/2, -height)
    });

    //将创建的点标记添加到已有的地图实例：
    map.add(marker)
    return marker
}

onHide(() => {
  map?.destroy();
});

</script>

<style scoped lang="scss">
#container{
    width: 100%;
    height: 800px;
}
</style>